<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/index.css">
    <title>8-css拟态图标制作</title>
</head>

<body>
    <div class="cont">
        <ul>
            <li class="icon_li">
                <div class="icon_box">
                    <img src="./images/lz.png" alt="">
                </div>
                <p>录音机</p>
            </li>
            <li class="icon_li">
                <div class="icon_box">
                    <img src="./images/wx.png" alt="">
                </div>
                <p>微信</p>
            </li>
            <li class="icon_li">
                <div class="icon_box">
                    <img src="./images/rl.png" alt="">
                </div>
                <p>日历</p>
            </li>
            <li class="icon_li">
                <div class="icon_box">
                    <img src="./images/sz.png" alt="">
                </div>
                <p>时钟</p>
            </li>
            <li class="icon_li">
                <div class="icon_box">
                    <img src="./images/llq.png" alt="">
                </div>
                <p>浏览器</p>
            </li>
            <li class="icon_li">
                <div class="icon_box">
                    <img src="./images/dh.png" alt="">
                </div>
                <p>电话</p>
            </li>
            <li class="icon_li">
                <div class="icon_box">
                    <img src="./images/xc.png" alt="">
                </div>
                <p>相册</p>
            </li>
            <li class="icon_li">
                <div class="icon_box">
                    <img src="./images/xj.png" alt="">
                </div>
                <p>相机</p>
            </li>
            <li class="icon_li">
                <div class="icon_box">
                    <img src="./images/dx.png" alt="">
                </div>
                <p>短信</p>
            </li>
            <li class="icon_li">
                <div class="icon_box">
                    <img src="./images/txl.png" alt="">
                </div>
                <p>通讯录</p>
            </li>
            <li class="icon_li last">
                <div class="icon_box">
                    <img src="./images/youtube.png" alt="">
                </div>
                <p>YouTube</p>
            </li>
            <li class="icon_li last">
                <div class="icon_box">
                    <img src="./images/facebook.png" alt="">
                </div>
                <p>Facebook</p>
            </li>
            <li class="icon_li last">
                <div class="icon_box">
                    <img src="./images/QQ.png" alt="">
                </div>
                <p>哔哩哔哩动画</p>
            </li>
            <li class="icon_li last">
                <div class="icon_box">
                    <img src="./images/QQ.png" alt="">
                </div>
                <p>QQ</p>
            </li>
        </ul>
    </div>
</body>

</html>